<template>
    <div class="chart-container">
        <!-- 年度开工率 -->
        <Echart
                :options="options"
                id="contentLeftChart"
                height="100%"
                width="100%"
        ></Echart>
    </div>
</template>

<script>
import Echart from '@/common/echart';

export default {
    data() {
        return {
            options: {},
        };
    },
    components: {
        Echart,
    },
    props: {
        cdata: {
            type: Object,
            default: () => ({})
        },
    },
    watch: {
        cdata: {
            handler(newData) {
                this.options = {
                    title: {
                        text: "",
                    },
                    tooltip: {
                        trigger: "axis",
                        backgroundColor: "rgba(255,255,255,0.1)",
                        axisPointer: {
                            type: "shadow",
                            label: {
                                show: true,
                                backgroundColor: "#7B7DDC"
                            }
                        }
                    },
                    legend: {
                        data: newData.legends,
                        textStyle: {
                            color: "#B4B4B4",
                            fontSize: 12
                        },
                        bottom: 0,
                    },
                    grid: {
                        // x: "8%",
                        // width: "28%",
                        // y: "4%"
                    },
                    xAxis: {
                        data: newData.category,
                        axisLine: {
                            lineStyle: {
                                color: "#B4B4B4"
                            }
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    yAxis: [
                        {
                            splitLine: {show: false},
                            axisLine: {
                                lineStyle: {
                                    color: "#B4B4B4"
                                }
                            },

                            axisLabel: {
                                formatter: "{value} "
                            }
                        },
                    ],
                    series: [
                        {
                            name: newData.legends[0],
                            type: "bar",
                            barWidth: 10,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 5,
                                    color: "#4F81BD"
                                }
                            },
                            data: newData.seriesData[0],
                            stack: 'a',
                        },
                    ]
                }
            },
            immediate: true,
            deep: true
        },
    },
}
</script>

<style lang="scss" scoped>
</style>